<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>柒</title>
<script src="jquery-3.3.1.min.js"></script>
<style>
*{margin:0; padding:0;}
body{
	background:url(img/1.jpg);
	background-size:cover;
}
div{
	width:1022px;
	margin:0 auto;
	box-sizing:border-box;
}
/*******   header    ****/
#header{
	height:50px;
	border:1px solid black;
}
span{
	font-size:36px;
	float:left;
	margin-top:4px;
	margin-left:15px;
}
.img1{
	margin-top:5px;
	margin-right:15px;
	width:40px;
	height:40px;
	border-radius:20px;
	float:right;
}
/********    nav    *****/
#nav{
	margin-top:10px;
	height:430px;
	border:1px solid black;
	padding:10px;
}
#left{
	width:602px;
	height:402px;
	border:1px solid black;
	float:left;
	overflow:hidden;
}
/*******    right   *******/
#right{
	width:390px;
	height:402px;
	border:1px solid black;
	float:right;
	padding:15px;
}
ul li{
	list-style:none;
	border:1px solid black;
	width:360px;
	height:80px;
	margin-top:10px;
	text-align:center;
}
a{
	color:#000;
	font-size:24px;
}
/*******    轮播图   ******/
img{
	width:601px;
	height:401px;
	position:relative;
}
#div2,#div3{width:2450px;float:left;}
#div1{width:2450px;}
/********    last  *****/
#laster{
	margin-top:10px;
	height:100px;
	border:1px solid black;
	text-align:center;
}
#laster p{
	font-size:24px;
}
#footer{
	margin-top:10px;
	height:50px;
	border:1px solid black;
	text-align:center;
}



</style>
</head>

<body>
<div id="zong">

<div id="header">
   <span>柒</span>
   <img class="img1" src="img/头像.jpg" alt="">
</div>

<div id="nav">
   <div id="left">
         <div id="div1">
             <div id="div2">
                <img src="img/1.jpg" alt="" >
                <img src="img/2.jpeg" alt="" >
                <img src="img/3.jpeg" alt="" >
                <img src="img/6.jpg" alt="" >
                <div id="div3"></div>
             </div>
         </div>
   
   </div>
   <div id="right">
        <ul>
           <li><a href="#">刺客伍六七番剧</a></li>
           <li><a href="#">阿七经典语录</a></li>
           <li><a href="#">伍六七与梅花十三</a></li>
           <li><a href="#">录音实况花絮</a></li>
        </ul>
   </div>
</div>

<div id="laster">
    <p>我今天就要带她走，我看今天谁敢拦我</p>
    <p>伍六七</p>

</div>

<div id="footer">很帅！！！</div>

<script>
$(document).ready(function(e) {
		var v1=document.getElementById('left');
		var v2=document.getElementById('div2');
		var v3=document.getElementById('div3');
		v3.innerHTML= v2.innerHTML;
		function fun(){
			 if(v1.scrollLeft<=0){
				 v1.scrollLeft=1806;
			 }
			 else{
				 v1.scrollLeft--;
			 }
		}
		var fun1=setInterval(fun,10);
		v1.onmouseover = function() {
				clearInterval(fun1);
			 };
		v1.onmouseout = function() {
				fun1 = setInterval(fun, 10);
			};
    });


</script>

</div>
</body>
</html>
